<template>
	<view class="doctor-publish-container">
		<!-- 表单容器 -->
		<scroll-view scroll-y class="form-scroll-container">
			<view class="form-container">
				<!-- 标题输入 -->
				<view class="form-item">
					<text class="label">标题</text>
					<input class="input-title" placeholder="请输入医疗资讯标题" v-model="publishForm.title" maxlength="50"
						placeholderClass="placeholder-text" />
					<text class="input-counter">{{ publishForm.title.length }}/50</text>
				</view>

				<!-- 正文输入 -->
				<view class="form-item">
					<text class="label">详细内容</text>
					<textarea class="textarea-content" placeholder="分享您的医疗专业见解" v-model="publishForm.content"
						maxlength="500" placeholderClass="placeholder-text"></textarea>
					<text class="input-counter">{{ publishForm.content.length }}/500</text>
				</view>

				<!-- 标签输入 -->
				<view class="form-item">
					<text class="label">标签</text>
					<view class="tag-inputs">
						<input class="input-tag" placeholder="医疗领域" v-model="publishForm.tag1" maxlength="10"
							placeholderClass="placeholder-text" />
						<input class="input-tag" placeholder="专科方向" v-model="publishForm.tag2" maxlength="10"
							placeholderClass="placeholder-text" />
						<input class="input-tag" placeholder="健康教育" v-model="publishForm.tag3" maxlength="10"
							placeholderClass="placeholder-text" />
					</view>
				</view>

				<!-- 图片上传 -->
				<view class="form-item">
					<text class="label">配图</text>
					<view class="image-upload" @click="uploadImage">
						<template v-if="publishForm.picture">
							<image :src="publishForm.picture" mode="aspectFill" class="uploaded-image"></image>
							<view class="image-mask" @click.stop="deleteImage">
								<text>×</text>
							</view>
						</template>
						<template v-else>
							<text class="upload-text">点击上传医疗资讯配图</text>
						</template>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部发布按钮 -->
		<view class="bottom-submit-container">
			<button class="submit-button" @click="submitPublish" :disabled="!validateForm()">
				发布资讯
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globaApi: '',
				publishForm: {
					title: '',
					content: '',
					tag1: '',
					tag2: '',
					tag3: '',
					picture: '',
					username: '',
					avatar: ''
				}
			}
		},
		onLoad() {
			this.globaApi = getApp().globalData.baseUrl;
			this.publishForm.username = uni.getStorageSync('username');
			this.publishForm.avatar = uni.getStorageSync('avatar');
		},
		methods: {
			deleteImage() {
				this.publishForm.picture = '';
			},
			uploadImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.publishForm.picture = res.tempFilePaths[0];
					}
				});
			},
			submitPublish() {
				// 验证表单
				if (!this.validateForm()) return;

				// 显示加载
				uni.showLoading({
					title: '发布中...'
				});
				const result = [
					this.publishForm.tag1,
					this.publishForm.tag2,
					this.publishForm.tag3
				].filter(tag => tag.trim() !== '')
				// 准备上传数据
				const formData = {
					title: this.publishForm.title,
					content: this.publishForm.content,
					label: result.join(' '),
					username: this.publishForm.username,
					avatar: this.publishForm.avatar,
					picture: this.publishForm.picture
				};


				// 如果有图片，需要上传图片
				if (this.publishForm.picture) {
					this.uploadImageToServer(formData);
				} else {
					this.submitToServer(formData);
				}
			},
			uploadImageToServer(formData) {
				uni.uploadFile({
					url: `${this.globaApi}/file/upload`,
					filePath: this.publishForm.picture,
					name: 'files',
					success: (uploadRes) => {
						const picture = JSON.parse(uploadRes.data);
						console.log(picture);
						formData.picture = picture.data;
						this.submitToServer(formData);
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '图片上传失败',
							icon: 'none'
						});
					}
				});
			},
			submitToServer(formData) {
				uni.request({
					url: `${this.globaApi}/article/add`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					data: formData,
					success: (res) => {
						uni.hideLoading();
						if (res.data.code === 200) {
							uni.showToast({
								title: '发布成功',
								icon: 'success'
							});
							uni.navigateBack();
						} else {
							uni.showToast({
								title: res.data.message || '发布失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},
			validateForm() {
				const {
					title,
					content
				} = this.publishForm;
				if (!title.trim()) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					});
					return false;
				}
				if (!content.trim()) {
					uni.showToast({
						title: '请输入正文内容',
						icon: 'none'
					});
					return false;
				}
				return true;
			}
		}
	}
</script>

<style scoped>
	.doctor-publish-container {
		background-color: #f5f7fa;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.08);
	}

	.nav-back {
		font-size: 44rpx;
		color: #2c3e50;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.form-scroll-container {
		flex: 1;
		width: 90%;
		/* padding: 30rpx; */
	}

	.form-item {
		margin-bottom: 40rpx;
		position: relative;
	}

	.label {
		display: block;
		margin-bottom: 15rpx;
		color: #2c3e50;
		font-weight: 600;
	}

	.input-title,
	.textarea-content,
	.input-tag {
		width: 93%;
		background-color: #ffffff;
		border: 2rpx solid #e0e6ed;
		border-radius: 12rpx;
		padding: 20rpx 20rpx;
		font-size: 28rpx;
		transition: border-color 0.3s ease;
	}

	.input-title:focus,
	.textarea-content:focus,
	.input-tag:focus {
		border-color: #3498db;
	}

	.textarea-content {
		height: 250rpx;
		width: 93%;
	}

	.tag-inputs {
		display: flex;
		justify-content: space-between;
	}

	.input-tag {
		width: 30%;
	}

	.image-upload {
		width: 250rpx;
		height: 250rpx;
		border: 2rpx dashed #bdc3c7;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.image-upload:hover {
		border-color: #3498db;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.image-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		transition: opacity 0.3s ease;
		color: white;
		font-size: 40rpx;
	}

	.image-upload:hover .image-mask {
		opacity: 1;
	}

	.upload-text {
		color: #7f8c8d;
		font-size: 24rpx;
	}

	.input-counter {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		font-size: 22rpx;
		color: #7f8c8d;
	}

	.placeholder-text {
		color: #bdc3c7;
	}

	.bottom-submit-container {
		width: 100%;
		background-color: white;
		margin-bottom: 83rpx;
		box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.08);
	}

	.submit-button {
		width: 100%;
		background-color: #3498db;
		color: white;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 32rpx;
	}

	.submit-button:disabled {
		background-color: #bdc3c7;
		color: #7f8c8d;
	}
</style>